<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>这是一个表单</title> 
            <link rel="stylesheet" href="/form-dist/plugins/bootstrap/bootstrap.min.css" />
            <link rel="stylesheet" href="/form-dist/plugins/other/componets.css" /> 
            <link rel="stylesheet" href="/form-dist/plugins/editormd/css/editormd.min.css" /> 
            
            <script src="/config.js"></script>
            <script src="/js/util.js"></script>
            <script src="/js/vue.js"></script>
            <script src="/template/templateConfig.js"></script>
            <style>
            input[type="radio"] {
                margin: 3px 3px 0px 5px;
            }
            *{
                color: #2e4251;
                font-family: inherit;
                font-style: normal;
                font-weight: normal;
            }
            .body {
                background-color: #fff;

            }
            .wallpaper {
                min-width : 625px;
                width: 625px;
                margin: auto;
                padding-top: 15px;
                padding-bottom: 15px;
            }
            .content {
                width : 100%;
                box-shadow: 0 0 5px rgba(0,0,0,0.2);
            }
            .form-group {
                margin-bottom: 10px;
            }
            .title {
                margin: 0px;
                padding: 10px;
                box-shadow: 0 2px 3px #e8eef3;
            }
            .stage-warp {
                padding: 20px;
            }
            </style>
        </head>
        <body>
            <section class="wallpaper">
                <div class="content">
                    <h1 class="title" style="position:relative;">
                        这是一个表单
                    </h1>
                    <div class="stage-warp">
                        

				<div class="view-warp"><div id="dom568172fed9" data-id="568172fed9" data-path="input.text" style="null" data-datajson="{&quot;name&quot;:&quot;inputText&quot;,&quot;value&quot;:&quot;&quot;,&quot;title&quot;:&quot;输入框&quot;,&quot;placeholder&quot;:&quot;请输入文本&quot;}"><div class="form-group"><label>输入框</label> <input type="text" name="inputText" placeholder="请输入文本" class="form-control input-sm"></div></div></div><div class="view-warp"><div id="dom4effdedb0c" data-id="4effdedb0c" data-path="button.submit" style="null" data-datajson="{&quot;title&quot;:&quot;提交&quot;}"><div class="form-group"><button type="button" onclick="submit()" class="btn btn-default">提交</button></div></div></div>
                    </div>
                </div>
            </section> 
            <script src="/form-dist/plugins/jquery/jquery.min.js" charset='utf-8'></script>
            <script src="/form-dist/plugins/bootstrap/bootstrap.min.js" charset='utf-8'></script>
            <script src="/form-dist/plugins/distpicker/distpicker.data.min.js" charset='utf-8'></script>
            <script src="/form-dist/plugins/distpicker/distpicker.min.js" charset='utf-8'></script>
            <script src="/form-dist/plugins/editormd/editormd.min.js" charset='utf-8'></script>
            <script src="/form-dist/plugins/webcam/webcam.min.js" charset='utf-8'></script>
            <script> 
                let vueEles = [];

                //加载组件
                if ( window.componentList ) {
                    window.componentList.forEach(function (item) {
                        util.loadJS(window.CONFIG.TEMPLATE_BASE_URL + item);
                    });
                }

                //注册组件
                let regElements = window.document.querySelectorAll("[data-id]");
                setTimeout(() => {
                    regElements.forEach((item) => {
                        let regEle = {  
                            hashId : item.getAttribute('data-id'),
                            vueId : "vue" + item.getAttribute('data-id'),
                            data : JSON.parse( item.getAttribute('data-datajson') ),
                            _constructor : eval("window.TEMPLATE." + item.getAttribute('data-path') + "._constructor"),
                            elementTemplate :  eval("window.TEMPLATE." + item.getAttribute('data-path') + ".elementTemplate"),
                            realTemplate : eval("window.TEMPLATE." + item.getAttribute('data-path') + ".realTemplate")
                        }; 
                        if ( !regEle.realTemplate ) item.innerHTML = regEle.elementTemplate;
                        let elID = {
                            el : "#dom" + regEle.hashId
                        }
                        optionObj = Object.assign(elID, regEle._constructor()); 
                        optionObj.data = regEle.data;
                        window[regEle.vueId] = new Vue(optionObj);
                        vueEles.push(window[regEle.vueId]);
                    });
                }, 500);

                function submit() {
                    let data = {}
                    vueEles.forEach((item)=>{
                        if ( item.getField && item.getValue ) {
                            data[item.getField()] = item.getValue();
                        }
                    }); 
                    console.log(JSON.stringify(data));
                    $.ajax({
                        url : window.CONFIG.POST.URL,
                        type : 'POST',
                        data :  {
                            'json' : JSON.stringify(data)
                        }, 
                        success : function (data) { 
                             console.log(data);
                        }
                    })
                }
            </script>
        </body>
        </html>
    